<template>
  <div class="app-container pb-10">
    <el-card>
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="flex items-center mb-4">
            <div class="font-bold !w-120px text-right">用户姓名:</div>
            <div class="text-14px ml-3">
              {{ info.user_name }}
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="flex items-center mb-4">
            <div class="font-bold !w-120px text-right">用户手机号:</div>
            <div class="text-14px ml-3">
              {{ info.user_tel }}
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="flex items-center mb-4">
            <div class="font-bold !w-120px text-right">余额提现金额:</div>
            <div class="text-14px ml-3">
              {{ info.price }}
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="flex items-center mb-4">
            <div class="font-bold !w-120px text-right">余额提现状态:</div>
            <div class="text-14px ml-3">
              <span v-if="info.audit == 0">待审核</span>
              <span v-else-if="info.audit == 1">已审核</span>
              <span v-else-if="info.audit == 2">已驳回</span>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="flex items-center mb-4">
            <div class="font-bold !w-120px text-right">余额提现操作人:</div>
            <div class="text-14px ml-3">
              {{ info.admin_name }}
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="flex items-center mb-4">
            <div class="font-bold !w-120px text-right">操作人手机号:</div>
            <div class="text-14px ml-3">
              {{ info.admin_tel }}
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="flex items-center mb-4">
            <div class="font-bold !w-120px text-right">创建时间:</div>
            <div class="text-14px ml-3">
              {{ formatTimestamp(info.created_at * 1000) }}
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="flex items-center mb-4">
            <div class="font-bold !w-120px text-right">驳回原因:</div>
            <div class="text-14px ml-3">
              {{ info.err_note }}
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="flex items-center mb-4">
            <div class="font-bold !w-120px text-right">转账截图:</div>
            <div class="text-14px ml-3" v-if="info?.image">
              <div v-for="(item, index) in info?.image?.split(',')" :key="index">
                <el-image preview-teleported style="width: 100px; height: 100px" :src="item" :zoom-rate="1.2"
                  :max-scale="7" :min-scale="0.2" :preview-src-list="info?.image?.split(',')"
                  :initial-index="info?.image?.split(',').length" fit="cover"></el-image>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <div v-if="info.audit == 0"
      class="fixed bottom-0 left-0 bg-[#fff] w-[100%] flex justify-center border-t-1 py-2 border-[#e4e7ed] z-10">
      <el-button v-hasPerm="['balance/audit']" @click="handleAudit('return')">
        驳回
      </el-button>
      <el-button v-hasPerm="['balance/audit']" type="primary" @click="handleAudit('commit')">
        通过
      </el-button>
    </div>

    <!-- 表单弹窗 -->
    <el-dialog v-model="dialog.visible" :title="dialog.title" append-to-body @close="handleCloseDialog">
      <el-form ref="userFormRef" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="审核状态" prop="type">
          <el-radio-group v-model="form.type" disabled>
            <el-radio value="commit">通过</el-radio>
            <el-radio value="return">驳回</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="转账截图" prop="images">
          <image-upload :limit="9" v-model="form.images" />
        </el-form-item>
        <el-form-item label="原因" prop="err_note">
          <el-input :rows="2" type="textarea" v-model="form.err_note" placeholder="请输入备注" />
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleSubmit">确 定</el-button>
          <el-button @click="handleCloseDialog">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import TradeAPI from "@/api/tradeLog";
import { useRoute } from "vue-router";
const route = useRoute();
import { formatTimestamp } from "@/utils/index";

// 获取详情
const info = ref<any>({});
const getDataInfo = () => {
  TradeAPI.getBalanceDetail({ id: route.query.id }).then((data) => {
    info.value = { ...data };
  });
};

const form = ref<any>({
  type: "commit",
  images: [],
  image: ""
});
/** 用户表单校验规则  */
const rules = reactive<any>({});

watch(
  () => form.value.type,
  (newValue) => {
    if (newValue == "commit") {
      rules.images = [
        {
          required: true,
          message: "通过必须转账截图",
          trigger: ["change", "blur"],
        },
      ];
    } else {
      rules.images = [];
    }
  },
  { immediate: true }
);

/**  弹窗对象  */
const dialog = reactive({
  visible: false,
  title: "审核",
});

/** 关闭弹窗 */
function handleCloseDialog() {
  dialog.visible = false;
}

// 打开审核
const handleAudit = (type: string) => {
  form.value.type = type;
  dialog.visible = true;
};

// 提交审核
const userFormRef = ref(ElForm);
const handleSubmit = () => {
  userFormRef.value.validate((valid: any) => {
    if (valid) {
      form.value.id = info.value.id;
      form.value.image = form.value.images.join(",");
      TradeAPI.balanceAudit(form.value).then((res) => {
        getDataInfo();
        dialog.visible = false;
        ElMessage.success("操作成功");
      });
    }
  });
};

onMounted(() => {
  getDataInfo();
});
</script>
